﻿<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="util" uri="functions"%>
<%
	String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + path + "/";

%>
<!DOCTYPE html>
<html lang="en">
<head>
<base href="<%=basePath%>">
<!-- jsp文件头和头部 -->

<%@ include file="../../system/index/top.jsp"%>

 <!-- 分页控件 -->
   <script type="text/javascript" src="static/ace/js/jquery.js"></script>
  <link type="text/css" href="static/css/page/bootstrap.min.css" rel="stylesheet" />
  <link type="text/css" href="static/css/page/bootstrap-pagination.min.css" rel="stylesheet" />
</head>
<body class="no-skin">

	<!-- /section:basics/navbar.layout -->
	<div class="main-container" id="main-container">
		<!-- /section:basics/sidebar -->
		<div class="main-content">
			<div class="main-content-inner">
				<div class="page-content">
					<div class="row">
						<div class="col-xs-12">
							<div id="div_all_data" v-cloak>
						<!-- 检索  -->
						<form action="admin/button/list.do" method="post" name="Form" id="Form">
						
						<!-- 检索  -->
					
						<table id="simple-table" class="table table-striped table-bordered table-hover" style="margin-top:5px;">	
							<thead>
								<tr>
									<th class="center" style="width:35px;">
									<label class="pos-rel"><input type="checkbox" class="ace" id="zcheckbox" /><span class="lbl"></span></label>
									</th>
									<th class="center" style="width:50px;">序号</th>
									<th class="center">名称</th>
									<th class="center">权限标识</th>
									<th class="center">备注</th>
									<th class="center">操作</th>
								</tr>
							</thead>
													
							<tbody>
							<!-- 开始循环 -->	
							<c:choose>
								<c:when test="${not empty totleCount}">
									<c:if test="${util:listAble() }">
										<tr v-for="(item,index) in data">
											<td class='center'>
												<label class="pos-rel"><input type='checkbox' name='ids' :value="item.id" class="ace" /><span class="lbl"></span></label>
											</td>
											<td class='center' style="width: 30px;">{{index + 1}}</td>
											<td class='center'>{{item.name}}</td>
											<td class='center'>{{item.authorityName}}</td>
											<td class='center'>{{item.remarks}}</td>
											<td class="center">
												<c:if test="${!util:editAble() && !util:deleteAble() }">
												<span class="label label-large label-grey arrowed-in-right arrowed-in"><i class="ace-icon fa fa-lock" title="无权限"></i></span>
												</c:if>
												<div class="hidden-sm hidden-xs btn-group">
													<c:if test="${util:editAble() }">
													<a class="btn btn-xs btn-success" title="编辑" @click="goEdit(item.id);">
														<i class="ace-icon fa fa-pencil-square-o bigger-120" title="编辑"></i>
													</a>
													</c:if>
													<c:if test="${util:deleteAble() }">
													<a class="btn btn-xs btn-danger" @click="del(item.id);">
														<i class="ace-icon fa fa-trash-o bigger-120" title="删除"></i>
													</a>
													</c:if>
												</div>
											</td>
										</tr>
									
									</c:if>
									<c:if test="${!util:listAble() }">
										<tr>
											<td colspan="100" class="center">您无权查看</td>
										</tr>
									</c:if>
								</c:when>
								<c:otherwise>
									<tr class="main_info">
										<td colspan="100" class="center" >没有相关数据</td>
									</tr>
								</c:otherwise>
							</c:choose>
							</tbody>
						</table>
						<div class="page-header position-relative">
						<table style="width:100%;">
							<tr>
								<td style="vertical-align:top;">
									<c:if test="${util:addAble() }">
									<a class="btn btn-sm btn-success"  @click="add();">新增</a>
									</c:if>
									<c:if test="${util:deleteAble() }">
									<a class="btn btn-sm btn-danger" @click="makeAll('确定要删除选中的数据吗?');" title="批量删除" ><i class='ace-icon fa fa-trash-o bigger-120'></i></a>
									</c:if>
								</td>
								    <!-- 分页的底部 -->
                                <td style="vertical-align:top;">
                                    <nav style="float:right">
                                        <ul id="demo1" class="pagination">
                                        </ul>
                                    </nav>
                                 </td>
							</tr>
						</table>
						</div>
						</form>
					</div>
						</div>
						<!-- /.col -->
					</div>
					<!-- /.row -->
				</div>
				<!-- /.page-content -->
			</div>
		</div>
		<!-- /.main-content -->

		<!-- 返回顶部 -->
		<a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse">
			<i class="ace-icon fa fa-angle-double-up icon-only bigger-110"></i>
		</a>

	</div>
	<!-- /.main-container -->

	<!-- basic scripts -->
	<!-- 页面底部js¨ -->
	<%@ include file="../../system/index/foot.jsp"%>
	<script type="text/javascript" src="static/js/jquery-form.js"></script>
    <script type="text/javascript" charset="utf-8" src="static/js/page/bootstrap-pagination.min.js"></script>
	<!-- 删除时确认窗口 -->
	<script src="static/ace/js/bootbox.js"></script>
	<!-- ace scripts -->
	<script src="static/ace/js/ace/ace.js"></script>
	<!--提示框-->
	<script type="text/javascript" src="static/js/jquery.tips.js"></script>
	<script type="text/javascript" src="static/js/vue.js"></script>
	<script type="text/javascript">
		$(top.hangge());//关闭加载状态
		//检索
		function tosearch(){
		    pageData.pageInfo = $('#Form').parseForm();
		    pageList(0, pageData.pageInfo.size);
		}
		//分页数据
		var pageData = {};
		pageData.total = '${empty totleCount ? 0:totleCount}';
		pageData.pageInfo = {};
		pageData.pageInfo.size =10;
		pageData.pageInfo.current = 0;
		pageData.data = [];
		
		var pageVm = new Vue({
		    el: '#div_all_data',
		    data: pageData,
		    methods: {
		        goEdit: function (id) {
		        	 top.jzts();
		             var diag = new top.Dialog();
		             diag.Drag=true;
		             diag.Title ="编辑";
		             diag.URL = '/admin/button/goEdit.do?id='+id;
		             diag.Width = 450;
		             diag.Height = 368;
		             diag.CancelEvent = function(){ //关闭事件
		                 if(diag.innerFrame.contentWindow.document.getElementById('zhongxin').style.display == 'none'){
		                	 pageList(0, pageData.pageInfo.size, 1);
		                }
		                diag.close();
		             };
		             diag.show();
		        },
		        del: function (id) {
		        	bootbox.confirm("确定要删除吗?", function(result) {
		                if(result) {
		                    top.jzts();
		                    var url = "<%=basePath%>admin/button/delete.do?id="+id+"&tm="+new Date().getTime();
		                    $.get(url,function(data){
		                    	 pageList(0, pageData.pageInfo.size, 1);
		                    });
		                }
		            });
		        },
		        add: function () {
		        	top.jzts();
		             var diag = new top.Dialog();
		             diag.Drag=true;
		             diag.Title ="新增";
		             diag.URL = '/admin/button/goAdd.do';
		             diag.Width = 450;
		             diag.Height = 368;
		             diag.CancelEvent = function(){ //关闭事件
		                 if(diag.innerFrame.contentWindow.document.getElementById('zhongxin').style.display == 'none'){
		                	 pageList(0, pageData.pageInfo.size, 1);
		                }
		                diag.close();
		             };
		             diag.show();
		        },
		        makeAll: function (msg) {
		        	bootbox.confirm(msg, function(result) {
		                if(result) {
		                    var str = '';
		                    for(var i=0;i < document.getElementsByName('ids').length;i++){
		                      if(document.getElementsByName('ids')[i].checked){
		                        if(str=='') str += document.getElementsByName('ids')[i].value;
		                        else str += ',' + document.getElementsByName('ids')[i].value;
		                      }
		                    }
		                    if(str==''){
		                        bootbox.dialog({
		                            message: "<span class='bigger-110'>您没有选择任何内容!</span>",
		                            buttons:            
		                            { "button":{ "label":"确定", "className":"btn-sm btn-success"}}
		                        });
		                        $("#zcheckbox").tips({
		                            side:1,
		                            msg:'点这里全选',
		                            bg:'#AE81FF',
		                            time:8
		                        });
		                        return;
		                    }else{
		                        if(msg == '确定要删除选中的数据吗?'){
		                            top.jzts();
		                            $.ajax({
		                                type: "POST",
		                                url: '<%=basePath%>admin/button/deleteAll.do?tm='+new Date().getTime(),
		                                data: {ids:str},
		                                dataType:'json',
		                                //beforeSend: validateData,
		                                cache: false,
		                                success: function(data){
		                                	 pageList(0, pageData.pageInfo.size, 1);
		                                }
		                            });
		                        }
		                    }
		                }
		            });
		        },
		        
		      }
		})
		
		
		//分页查询
		function pageList(pageIndex, pageSize, type){
		    pageData.pageInfo.current = ((pageIndex - 0) +1);
		    pageData.pageInfo.size = pageSize;
		    $.post("<%=basePath%>admin/button/list.do", pageData.pageInfo, function(result){
		        if (result.code == 200){
		        	pageData.data = [];
		            var resultData = result.data.data;
		            pageData.total = result.data.total;
		            if(type == 1){
		                initBootstrap(parseInt(result.data.total));
		            }
		            for (var i = 0; i < resultData.length; i++){
		                pageData.data.push(resultData[i]);
		            }
		        }
		    })
		    $(top.hangge());
		}
		$(function() {
			//初始化第一页数据
		    pageList( pageData.pageInfo.current, pageData.pageInfo.size);
		    //分页控制
		    initBootstrap(parseInt(pageData.total));
		    
			//复选框全选控制
			var active_class = 'active';
			$('#simple-table > thead > tr > th input[type=checkbox]').eq(0).on('click', function(){
				var th_checked = this.checked;//checkbox inside "TH" table header
				$(this).closest('table').find('tbody > tr').each(function(){
					var row = this;
					if(th_checked) $(row).addClass(active_class).find('input[type=checkbox]').eq(0).prop('checked', true);
					else $(row).removeClass(active_class).find('input[type=checkbox]').eq(0).prop('checked', false);
				});
			});
		});
		
		//分页初始化
		function initBootstrap(total){
		     var demo1 = BootstrapPagination($("#demo1"), {
		         //记录总数。 
		         total: total,
		         //当前页索引编号。从其开始（从0开始）的整数。
		         pageIndex: 0,
		         pageGroupSize: 5,
		         pageSize: 10,
		         //当分页更改后引发此事件。
		         pageChanged: function (pageIndex, pageSize) {
		             pageList(pageIndex, pageSize, 2);
		         },
		     }); 
		}
		
		//导出excel
		function toExcel(){
			window.location.href='<%=basePath%>admin/button/excel.do';
		}
	</script>


</body>
</html>